<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
	xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Security Login</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			padding: 20px auto;
			background: linear-gradient(blue, red);
			color: #fff;
			font-size: 40px;
		}

		input, button {
			font-size: 36px;
			width: 100%;
			height: 100%;
		}

		.warnning {
			font-style: italic;
		}
	</style>
</head>

<body>
	<div class="container">
		<div>
			<div>
				<h1>Security Sign In</h1>
			</div>
			<div>
				<form th:action="@{/auth/form}" method="POST">
					<table>
						<tr>
							<td>Username: </td>
							<td>
								<input type="text" name="username" placeholder="Please input username" />
							</td>
						</tr>
						<tr>
							<td>Password: </td>
							<td>
								<input type="password" name="password" placeholder="Please input password" />
							</td>
						</tr>
						<tr class="warnning" th:if="${param.error}">
							<td colspan="2">Invalid username or password. </td>
						</tr>
						<tr>
							<td colspan="2"><button type="submit">Sign in</button> </td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
</body>

</html>